<template>
	<view class="page">
		<view class="view" v-if="list">
			<view class='card'>
				<view class='card-name'>{{list.coupon.name}}</view>
				<view class='card-name'>{{list.coupon.sub_price}}元抵用券</view>
				<view class="qr" v-if="list.status == 0">
					<image class='qrimg' v-if="qrimg" :src='qrimg'></image>
				</view>
				<view class="over" v-else-if="list.status == 1">已使用</view>
				<view class="over" v-else>已过期</view>
			</view>
			<view class='line'>
				<image src='/static/image/icon/line.png'></image>
			</view>
			<view class='explain use-time' v-if="list.is_show_history">
				<view class='explain-title'>核销时间</view>
				<view class="clerk-history">
					<view>{{list.clerked_at}}</view>
					<view @click="isShow = true" class="history-button">查看历史</view>
				</view>
			</view>
			<view class='explain use-time'>
				<view class='explain-title'>领取时间</view>
				<view>{{list.created_at}}</view>
			</view>
			<view class='explain use-time'>
				<view class='explain-title'>有效期</view>
				<view>自领取日起{{list.coupon.expire_day}}天有效</view>
			</view>
			<view class='explain card-info'>
				<view class='explain-title'>使用说明</view>
				<view>
					<text style="word-break: break-all;">仅限{{list.coupon.name}}使用</text>
				</view>
			</view>
			<view class='explain card-info'>
				<view class='explain-title'>使用规则</view>
				<view>
					<text style="word-break: break-all;">{{rules}}</text>
				</view>
			</view>
			<!-- <view class='explain card-info-2'>
				<view class='explain-title'>核销信息</view>
				<view class="clerk-info">
					<view class="clerk-item">
						<view>剩余次数：</view>
						<view>{{list.number - list.use_number}}次</view>
					</view>
					<view class="clerk-item">
						<view>已核销次数：</view>
						<view>{{list.use_number}}次</view>
					</view>
					<view class="clerk-item">
						<view>总次数：</view>
						<view>{{list.number}}次</view>
					</view>
				</view>
			</view> -->
		</view>
		<!-- <app-clerk-historys :user-card-id="list.id" :is-show.sync="isShow"></app-clerk-historys> -->
	</view>
</template>

<script>
	import {
		mapState
	} from "vuex";
	import {
		mapGetters
	} from "vuex";
	import appClerkHistorys from '../../../components/page-component/app-clerk-historys/app-clerk-historys.vue';
	import appShareQrCode
	from '../../../components/page-component/app-share-qr-code-poster/app-share-qr-code-poster.vue';

	export default {
		name: "app-card-detail",
		components: {
			appClerkHistorys,
			appShareQrCode
		},
		props: {
			list: {
				type: Object | null,
				default () {
					return null
				}
			},
			qrpath: {
				type: String,
				default () {
					return ''
				}
			},
			rules: {
				type: String,
				default () {
					return ''
				}
			}
		},
		data() {
			return {
				isShow: false,
				shareShow: false,
				file_path: '',
				qrimg: ''
			}
		},
		computed: {
			...mapGetters('mallConfig', {
				theme: 'getTheme',
			}),
		},
		watch: {
			list() {
				if (this.list.status == 0) {
					this.$request({
						url: this.$api.generate.appcode,
						method: 'post',
						data: {
							path: this.qrpath,
							width: '750',
							scene: "id=" + this.list.coupon_id + "&uid=" + this.list.member.id
						},
					}).then(response => {
						if (response.code === 0) {
							this.qrimg = response.data.qrcode;
						} else {
							uni.showToast({
								title: response.msg,
								icon: 'none',
								duration: 1000,
							});
						}
					}).catch(() => {});
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.page {
		min-height: 100vh;
		background-color: #ff7b33;
		width: 100%;
	}

	.view {
		background-color: #ff7b33;
		padding: #{72rpx} #{24rpx};
		position: relative;
	}

	.card {
		background-color: #fff;
		border-top-left-radius: #{16rpx};
		border-top-right-radius: #{16rpx};
		padding: #{90rpx} #{40rpx} #{24rpx};
	}

	.card-info {
		background-color: #fff;
	}

	.card-img {
		position: absolute;
		top: #{32rpx};
		left: 50%;
		margin-left: #{-44rpx};
		height: #{88rpx};
		width: #{88rpx};
		border-radius: 50%;
	}

	.card-name {
		text-align: center;
		font-size: #{50rpx};
		margin-bottom: #{31rpx};
		color: #353535;
	}

	.over {
		width: #{240rpx};
		height: #{64rpx};
		text-align: center;
		color: #999;
		font-size: #{30rpx};
		line-height: #{64rpx};
		border-radius: #{32rpx};
		background-color: #f7f7f7;
		margin: 0 auto;
	}

	.line {
		height: #{48rpx};
		width: 100%;
	}

	.line image {
		height: 100%;
		width: 100%;
	}

	.explain {
		background-color: #fff;
		padding: #{20rpx} #{40rpx};
		font-size: #{28rpx};
		color: #353535;
	}

	.explain.use-time {
		padding-bottom: #{20rpx};
	}

	.explain-title {
		font-size: #{26rpx};
		color: #999;
		margin-bottom: #{15rpx};
	}

	.qrimg {
		width: #{400rpx};
		height: #{400rpx};
		margin: 0 auto;
	}

	.qr {
		width: #{400rpx};
		display: block;
		margin: 0 auto;
	}

	.qr image {
		height: #{400rpx};
		width: 100%
	}

	.clerk-info {
		display: flex;
		flex-direction: column;

		.clerk-item {
			display: flex;
		}
	}

	.card-info-2 {
		background-color: #fff;
		border-bottom-left-radius: #{16rpx};
		border-bottom-right-radius: #{16rpx};
		padding-bottom: 60#{rpx};
	}

	.clerk-history {
		display: flex;
		align-items: center;

		.history-button {
			width: 125#{rpx};
			height: 48#{rpx};
			border-radius: 30#{rpx};
			margin-left: 10#{rpx};
			font-size: #{22rpx};
			color: #ac450d;
			background: #ffeda9;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}

	.over.over-lg {
		width: auto;
		padding: #{0 34rpx};
		height: auto;
		margin: 0;
		max-width: 100%;
	}

	.over .icon_ok {
		width: #{32rpx};
		height: #{32rpx};
		margin-right: #{15rpx};
		margin-top: #{15rpx};
	}

	.give-btn {
		width: #{240rpx};
		height: #{64rpx};
		line-height: #{64rpx};
		border-radius: #{32rpx};
		border: #{1rpx solid};
		text-align: center;
		transform: rotateZ(360deg);
		margin: #{0 auto 46rpx auto};
	}

	.img_seal {
		position: absolute;
		bottom: #{132rpx};
		right: #{84rpx};
		width: #{150rpx};
		height: #{117rpx};
		display: block;
	}
</style>
